<template>
	<el-date-picker v-model="dateRange" :shortcuts="shortcuts" type="datetimerange" align="right" unlink-panels
		range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss"
		@change="handleDateChange">
	</el-date-picker>
</template>

<script>
	var _this;

	import dayjs from 'dayjs'

	export default {
		data() {
			return {
				shortcuts: [{
						text: '最近一周',
						value: () => {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							return [start, end]
						},
					}, {
						text: '最近一个月',
						value: () => {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							return [start, end]
						},
					},
					{
						text: '最近三个月',
						value: () => {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							return [start, end]
						},
					}, {
						text: '永久',
						value: () => {
							const start = new Date()
							return [start, "2099-12-31 23:59:59"]
						},
					},
				],
			};
		},
		mounted() {

		},
		props: {
			starts_at: {
				type: String,
				default: ""
			},
			ends_at: {
				type: String,
				default: ""
			}
		},
		computed: {
			dateRange: {
				get() {
					return [this.starts_at, this.ends_at]
				},
				set(value) {
					this.$emit('update:starts_at', value?.[0] || null)
					this.$emit('update:ends_at', value?.[1] || null)
				}
			}
		},
		methods: {
			handleDateChange(pickerDates) {
				if (pickerDates && pickerDates.length === 2) {
					const end = dayjs(pickerDates[1]).format('HH:mm:ss') === '00:00:00' ?
						dayjs(pickerDates[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss') :
						pickerDates[1]
					this.$emit('update:starts_at', pickerDates[0])
					this.$emit('update:ends_at', end)
					this.$emit('update:modelValue', [pickerDates[0], end])
				} else {
					this.$emit('update:starts_at', null)
					this.$emit('update:ends_at', null)
				}
			}
		}
	};
</script>
